<template>
    <div id="menu">
        <el-button type="primary" @click="showAdd" >添加一级菜单</el-button>
        <el-divider></el-divider>
        <el-table
                :data="tableData.rows"
                style="width: 100%;margin-bottom: 20px;"
                row-key="id"
                border
                :tree-props="{children: 'children', hasChildren: 'true'}">

            <el-table-column
                    prop="id"
                    sortable
                    label="编号">
            </el-table-column>

            <el-table-column
                    prop="path"
                    label="路径">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="菜单名称">
            </el-table-column>
            <el-table-column
                    prop="sort"
                    label="排序(小到大)">
            </el-table-column>
            <el-table-column
                    prop="description"
                    label="菜单描述">
            </el-table-column>
            <el-table-column
                    prop="creator"
                    label="创建者">
            </el-table-column>

            <el-table-column
                    prop="gmtCreated"
                    sortable
                    label="创建时间">
            </el-table-column>

            <el-table-column
                    prop="modifier"
                    label="更新者">
            </el-table-column>

            <el-table-column
                    prop="gmtModified"
                    sortable
                    label="更新时间">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作">
                <template slot-scope="scope">
                    <el-button @click="showAddChildren(scope.row)" type="text" size="small">添加子菜单</el-button>
                    <el-button @click="showEdit(scope.row)" type="text" size="small">编辑</el-button>
                    <el-button @click="deleteMenu(scope.$index,scope.row)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                background
                layout="total, prev, pager, next,sizes"
                :page-size="tableData.size"
                :current-page="tableData.current"
                @current-change="requestData"
                @size-change="requestData"
                :total="tableData.total">
        </el-pagination>

        <el-dialog :title="title" @close="closeDialog" :visible.sync="dialogEditVisible">
            <el-form :model="form">
                <el-form-item label="父菜单" :label-width="'120px'" v-if="showTitle">
                    <el-input v-model="parentName" readonly></el-input>
                </el-form-item>
                <el-form-item label="菜单id" :label-width="'120px'" v-show="form.id !== null">
                    <el-input v-model="form.id" readonly></el-input>
                </el-form-item>
                <el-form-item label="菜单路径" :label-width="'120px'">
                    <el-input v-model="form.path"></el-input>
                </el-form-item>
                <el-form-item label="菜单名称" :label-width="'120px'">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="排序" :label-width="'120px'">
                    <el-input v-model="form.sort"></el-input>
                </el-form-item>
                <el-form-item label="菜单描述" :label-width="'120px'">
                    <el-input v-model="form.description"></el-input>
                </el-form-item>
                <el-form-item label="父菜单"  :label-width="'120px'" v-show="false">
                    <el-input v-model="form.parentId"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogEditVisible = false">取 消</el-button>
                <el-button type="primary" @click="addOrEdit">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
    export default {
        name: "Menu",
        data(){
            return{
                title: '',

                parentName: '',

                showTitle: false,

                menuParent:[
                    {
                        id: null,
                        name: null
                    }
                ],
                dialogEditVisible: false,
                page: {
                    size: 10,
                    current: 1,
                    query: {
                        id: null,
                        path: null,
                        name: null,
                        parentId: null,
                        description: null
                    }
                },
                form: {
                    id: null,
                    path: null,
                    name: null,
                    sort: null,
                    parentId: null
                },
                tableData: {
                    total: null,
                    size: 10,
                    current: 1,
                    rows: [
                        {
                            id: null,
                            path: null,
                            name: null,
                            sort: null,
                            parentId: null,
                            children:[]
                        }
                    ]
                },
            }
        },

        methods: {
            closeDialog(){
                this.showTitle = false;
                this.form = {
                    id: null,
                    path: null,
                    name: null,
                    parentId: null,
                    description: null,
                };
            },
            async requestData() {
                let resp = await this.$http.post("/sysMenu/getTree", this.page);
                let data = resp.data;
                if (data.code === 200) {
                    this.tableData = data;
                }
            },
            showEdit(row) {
                this.dialogEditVisible = true;
                /*获取数据库*/
                this.form = {
                    id: row.id,
                    path: row.path,
                    name: row.name,
                    parentId: row.parentId,
                    sort: row.sort,
                    description: row.description,
                };
            },
            showAddChildren(row){
                this.title = '添加子菜单';
                this.dialogEditVisible = true;
                this.showTitle = true;
                this.form.parentId = row.id;
                this.parentName = row.name;
            },
            showAdd(){
                this.title = '添加一级菜单';
                this.dialogEditVisible = true;

                this.$http.post("/sysMenu/getParentList").then(resp =>{
                    let data = resp.data;
                    if (data.code === 200){
                        this.menuParent = data.rows;
                    }
                });
            },

            deleteMenu(index,row){
                this.$confirm("确定删除?","提示",{
                    confirmButtonText:'确定',
                    cancelButtonText:'取消',
                    type: 'warning'
                }).then(() => {
                    this.$http.delete("/sysMenu/delete/"+row.id).then(resp => {
                        let data = resp.data;
                        if (data.code === 200){
                            this.$message.success(data.info);
                            location.reload();
                        }else {
                            this.$message.error(data.info);
                        }
                    });

                }).catch(()=>{
                })
            },
            async addOrEdit() {
                let resp;
                if (this.form.id === null) {
                    resp = await this.$http.post("/sysMenu/add", this.form);
                } else {
                    resp = await this.$http.put("/sysMenu/edit",this.form);
                }
                let data = resp.data;
                if (data.code === 200){
                    this.$message.success(data.info);
                } else {
                    this.$message.error(data.info);
                }
                location.reload();
                this.dialogEditVisible = false;
            }
        },
        created() {
            this.requestData();
        }
    }
</script>

<style scoped>

</style>
